<template>
    <el-select 
        filterable
        class="filter-select"
        v-model="selectorValue" 
        :placeholder="placeholder"
        :filter-method="handleInput"
        @change="handleSelector"
        @blur="handleBlur"
    >
        <el-option
            v-for="option in FilterSelectJSON"
            :key="option.value"
            :label="option.label"
            :value="option.label"
        >
        </el-option>
    </el-select>
</template>

<script>
import { FilterSelectJSON } from "./utils/static";
import {
    byKeysGetEnemptyResult,
    isEmptyObject,
    refreshFormFilterKeys
} from "./utils/index";

export default {
    props: {
        form: {
            type: Object,
            default:()=>{}
        },
        placeholder: {
            type: String,
            default: ""
        }
    },

    computed: {
        watchForm: function() {
            return Object.assign({}, this.form);
        }
    },

    data() {
        return {
            selectorValue: "",
            userInput: "",
            FilterSelectJSON
        }
    },
    
    mounted() {
        this.initSelectorValue();
    },

    methods: {
        // this.userFrom = refreshFormFilterKeys(this.userFrom)
        // 把key,value作为一个对象传过来
        // {
        //     key,
        //     value
        // }
        handleUpdateForm({
            key,
            value
        }) {
            this.form = refreshFormFilterKeys(this.form)
            this.form[key] = value;
        },

        handleSelector(userSelector) {
            if (!this.userInput) {
                this.selectorValue = undefined;
                return;
            };

            const selectorValue = `${userSelector}: ${this.userInput}`;
            const key = FilterSelectJSON.find(params => params.label === userSelector).value;
            const params = {
                key,
                value: this.userInput,
                selectorValue: selectorValue
            };

            this.selectorValue = selectorValue;
            this.handleUpdateForm(params);
            this.$emit("onSelectChange", params)
        },

        handleBlur(event) {
            const { target: oInput } = event;
            const userInput = oInput.value || "";
            if (!userInput) return;

            const filterParams = this.validateUserInput(userInput);
            const { 
                selectorValue = ""
            } = filterParams || {};

            this.selectorValue = selectorValue;
            this.handleUpdateForm(filterParams);
            this.$emit("onSelectBlur", filterParams);
        },

        handleInput(input) {
            this.userInput = input;
        },

        validateUserInput(userInput) {
            for (let index = 0; index < FilterSelectJSON.length; index++) {
                const { 
                    regularExpression,
                    label,
                    value
                } = FilterSelectJSON[index];
                const shouldStopEach = regularExpression.test(userInput) || !userInput;

                if (shouldStopEach) {
                    return {
                        key: value,
                        value: userInput,
                        selectorValue: `${label}: ${userInput}`
                    };
                }
            }
        },

        initSelectorValue() {
            const markKeys = this.FilterSelectJSON.map(option => option.value);
            const [ 
                filtered = {} 
            ] = byKeysGetEnemptyResult(this.form, markKeys);
            const {
                key,
                value
            } = filtered;

            this.userInput = value;
            this.selectorValue = isEmptyObject(filtered) ? "" : `${key}: ${value}`;
        },
    },

    watch: {
        watchForm: {
            handler: function(val, oldVal) {
                this.initSelectorValue();
            },
            deep: true
        }
    }
}
</script>

<style scoped lang="scss">
.filter-select {
    width: 100%;
}
</style>